<template>
  <div class="login-page flex items-center">
    <div class="absolute top-24px left-24px">
      <img class="h-30px c-p" src="@/assets/images/logo.svg" alt="" />
    </div>
    <t-form
      class="login-form w-400px ml-100px"
      :data="formData"
      :rules="FORM_RULES"
      label-width="0"
      @submit="onSubmit"
    >
      <div class="text-3xl mb-4 line-height-46px">
        登录到<br />
        抖音活动管理后台
      </div>
      <t-form-item name="username">
        <t-input v-model="formData.username" size="large" placeholder="请输入登录账号">
          <template #prefix-icon>
            <t-icon name="user" />
          </template>
        </t-input>
      </t-form-item>
      <t-form-item name="password">
        <t-input
          v-model="formData.password"
          size="large"
          :type="showPsw ? 'text' : 'password'"
          clearable
          placeholder="请输入登录密码"
        >
          <template #prefix-icon>
            <t-icon name="lock-on" />
          </template>
          <template #suffix-icon>
            <t-icon :name="showPsw ? 'browse' : 'browse-off'" @click="showPsw = !showPsw" />
          </template>
        </t-input>
      </t-form-item>
      <!-- <t-form-item
        v-if="codeData.captchaEnabled"
        name="code"
        class="flex justify-between items-center"
      >
        <t-input class="w-260px" v-model="formData.code" size="large" placeholder="请输入验证码">
          <template #prefix-icon>
            <t-icon name="map-safety" />
          </template>
        </t-input>
        <t-image
          @click="getCode"
          class="w-130px h-30px ml-10px cursor-pointer"
          :src="`data:image/png;base64,${codeData.img}`"
        />
      </t-form-item> -->
      <div class="flex justify-between mb-4">
        <t-checkbox v-model="checked">记住账号</t-checkbox>
        <!-- <t-link theme="primary" hover="color">忘记账号？</t-link> -->
      </div>
      <t-form-item class="btn-container">
        <t-button :loading="isLoading" block size="large" type="submit"> 登 录 </t-button>
      </t-form-item>
    </t-form>
  </div>
</template>

<script setup>
import { post, get, setLocalData } from '@common'
import { useStorage } from '@vueuse/core'
import { MessagePlugin } from 'tdesign-vue-next'
import { ref, computed, watch } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { useSystem } from '@/store/system'
// 常量
const STORAGE_KEY = import.meta.env.VITE_BASE_STORAGE
const INITIAL_DATA = {
  username: useStorage(`${STORAGE_KEY}.account`, '').value,
  password: '',
  code: ''
}
const FORM_RULES = {
  username: [{ required: true, message: '登录账号必填', type: 'error' }],
  password: [{ required: true, message: '密码必填', type: 'error' }],
  code: [{ required: true, message: '验证码必填', type: 'error' }]
}
// 非动态变量
const router = useRouter()
const route = useRoute()
const system = useSystem()
//动态变量
const checked = ref(false)
let isLoading = ref(false)
const formData = ref({ ...INITIAL_DATA })
// const codeData = ref({
//   img: '',
//   uuid: ''
// })
const showPsw = ref(false)
// 函数
// const getCode = async () => {
//   const res = await get('code')
//   codeData.value = res.data
// }
const onSubmit = async (ctx) => {
  if (ctx.validateResult === true) {
    isLoading.value = true
    try {
      // const api = process.env.NODE_ENV == 'development' ? 'auth/login' : 'auth/sso_login'
      const api = 'auth/login'
      const res = await post(api, {
        ...formData.value
        // uuid: codeData.value.uuid
      })
      isLoading.value = false
      if (checked.value) {
        useStorage(`${STORAGE_KEY}.account`).value = formData.value.username
      }
      system.setToken(res.data.access_token)
      // 供应商id
      setLocalData('tenant-id', res.data.tenant_id)
      // 渠道:0平台，1供应商，2项目负责人
      setLocalData('channel', res.data.channel)
      // 是否提示刷新密码
      setLocalData('refreshPwd', res.data.refreshPwd ? 1 : 0)
      MessagePlugin.success('登录成功')
      // const redirect = route.query.redirect
      // const redirectUrl = redirect ? decodeURIComponent(redirect) : '/'
      const redirectUrl = '/board'
      await router.push(redirectUrl)
      setTimeout(() => {
        window.location.reload()
      }, 500)
    } finally {
      isLoading.value = false
      // getCode()
    }
  }
}
// 立即执行函数
// getCode()
system.setToken()
</script>
<style lang="less" scoped>
.login-page {
  width: 100vw;
  height: 100vh;
  box-sizing: border-box;
  background-color: white;
  // TODO 换背景
  background-image: url('@/assets/images/login_bg.png');
  background-size: cover;
}
</style>
